<!-- 售后详情 -->
<template>
	<view>
		<view>
			<view class="right-title">
				<uni-icons class="uniIcons" type="back" size="20" @click="goBack"></uni-icons>
				退单详情
			</view>
			<!-- 当前进度 -->
			<view class="active-style">
				<uni-steps active-color="#e60012" :options="activeList" :active="active" />
			</view>
			<!-- 退单列表 -->
			<view class="order-table">
				<view class="order-detail-container">
					<!-- 退单基本信息 -->
					<view class="product-info">
						<view class="section-title">
							<text class="">退单信息</text>
							<text class="orderTime">申请时间：{{ orderDetail.createTime }}</text>
						</view>
						<view class="product-item">
							<view class="product-desc">
								<text class="product-model">退款编号：{{ orderDetail.orderNo }}</text>
								<text class="product-quantity">退款金额：<text class="product-money">
										<text class="product-money1">￥</text>152
									</text>
								</text>
								<text class="product-quantity">申请件数：1</text>
								<text class="product-quantity">原因：七天无理由</text>
								<text class="product-quantity">要求：退货退款</text>
								<text class="product-quantity">货物状态：已寄回</text>
								<view class="product-view">
									<text class="product-quantity">图片信息：</text>
									<uni-file-picker :value="fileLists" :imageStyles="imageStyles"
										limit="0"></uni-file-picker>
									<!-- <image class="informationImg" src="/static/carousel04.png"></image> -->
									<!-- <image class="informationImg" src="/static/carousel04.png"></image> -->
								</view>

							</view>
						</view>
					</view>

					<!-- 订单信息 -->
					<view class="shipping-info">
						<view class="section-title">
							<text class="">订单信息</text>
						</view>
						<view class="product-item">
							<view class="product-desc">
								<text class="product-model">订单编号：{{ orderDetail.orderNo }}</text>
								<text class="product-quantity">单价：￥379.00*1（数量）</text>
								<text class="product-quantity">邮费：￥0.00</text>
								<text class="product-quantity">商品总价：<text class="product-money">
										<text class="product-money1">￥</text>152
									</text></text>
							</view>
						</view>
					</view>
					<!-- 产品信息 -->
					<view class="product-info">
						<text class="section-title">产品信息</text>

						<uni-table ref="table" border stripe emptyText="暂无更多数据">
							<uni-tr>
								<uni-th width="150" align="center">产品信息</uni-th>
								<uni-th width="150" align="center">数量</uni-th>
								<uni-th width="150" align="center">单价</uni-th>
								<uni-th width="150" align="center">小计</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in tableData" :key="index">
								<uni-td align="center">
									<view class="information">
										<view class="td-img">
											<image src="/static/carousel04.png" mode="aspectFill"></image>
										</view>
										<view class="introduce">
											<view class="introduce-name">聚合物真零级涡旋半波片，m=1，工作波长633 nm，通光孔径21.5
												mm，双层衬底，安装于标准SM1透镜套筒中</view>
											<view class="introduce-model">产品型号：VR1-633</view>
										</view>
									</view>
								</uni-td>
								<uni-td align="center">2</uni-td>
								<uni-td align="center">125</uni-td>
								<uni-td align="center">300</uni-td>
							</uni-tr>
						</uni-table>
					</view>
				</view>

			</view>
		</view>
	</view>
	<!-- </view> -->
</template>

<script>
	import tableData from '/pages/test1/tableData.js'
	export default {
		name: "salesDetails",
		data() {
			return {
				active: 1, // 当前进度
				activeList: [{
					title: '买家申请退货退款'
				}, {
					title: '卖家处理退货申请'
				}, {
					title: '买家退货'
				}, {
					title: '退款完成'
				}],

				orderDetail: {
					orderNo: 'GS15250506064',
					createTime: '2025-05-06 10:24:54',
					status: '待付款',
					remainingTime: '01时49分10秒',
					productImg: '/static/carousel04.png',
					productName: '固定式薄片安装座，嵌入式安装，M4螺孔',
					productModel: 'FMS-IF',
					quantity: 2,
					price: 232,
					totalPrice: 464,
					shippingFee: 0,
					coupon: 0,
					finalPrice: 464,
					receiver: '张先生',
					phone: '138****1234',
					address: '北京市海淀区中关村大街1号',
					emailInput: '1212121@qq.com',
				},
				tableData: [], // 产品表格数据
				isDisabled: true, // 是否开启禁用

				// 查看大图
				imageStyles: {
					width: 50,
					height: 50,
				},
				fileLists: [{
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg'
				}, {
					url: 'https://qiniu-web-assets.dcloud.net.cn/unidoc/zh/shuijiao-small.jpg'
				}]
			};
		},
		mounted() {
			// 实际项目中应根据订单ID从服务器获取详情
			this.getData();
		},
		methods: {
			// 返回
			goBack() {
				this.$emit('salesDack', false)
			},
			// 编辑邮箱
			editEmail() {
				if (this.isDisabled) {
					this.isDisabled = false;
				} else {
					const emailInput = this.validateEmail(this.orderDetail.emailInput)
					if (emailInput) {
						this.isDisabled = true;
						uni.showToast({
							icon: 'none',
							title: '修改成功',
							duration: 2000
						});
					} else {
						uni.showToast({
							icon: 'none',
							title: '请正确填写邮箱地址',
							duration: 2000
						});
					}
				}
			},
			// 验证邮箱
			validateEmail(email) {
				const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
				return emailRegex.test(email);
			},
			getData() {
				console.log(222220);
				this.request({
					success: res => {
						console.log('data', res);
						this.tableData = res.data
					}
				})
			},
			// 伪request请求
			request(options) {
				console.log('tableData00:', tableData)
				const {
					success
				} = options
				let data = tableData;
				setTimeout(() => {
					typeof success === 'function' &&
						success({
							data: data
						})
				}, 500)
			}
		}
	}
</script>

<style scoped>
	.right-content {
		width: 1200px;
		height: 800px;
		padding: 10px 20px;
		box-sizing: border-box;
		background: #fff;
		margin-left: 20px;
		border-radius: 10px;
	}

	.uniIcons {
		cursor: pointer;
	}

	.active-style {
		width: 600px;
		height: 50px;
		margin-bottom: 20px;
	}

	.right-title {
		width: 100%;
		min-height: 50px;
		border-radius: 25px;
		/* background: #E5E5E5; */
		/* background-image: linear-gradient(45deg, #e60012, #f3a73f); */
		color: #41250e;
		padding: 0 5px 0 15px;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		margin-bottom: 20px;
		font-size: 16px;
	}

	.order-table {
		/* border: 1px solid #e5e5e5; */
		height: 660px;
		border-radius: 8px;
		overflow-y: auto;
		font-size: 14px;
	}

	/* 订单详情 */
	.order-detail-container {
		padding: 2px 20px;
	}

	.order-base-info,
	.product-info,
	.order-amount,
	.shipping-info {
		background-color: #fff;
		border-radius: 8px;
		margin-bottom: 15px;
		/* padding: 10px 15px; */
		box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
	}

	.info-item {
		display: flex;
		padding-left: 15px;
		margin-bottom: 4px;
	}

	.info-item:last-child {
		padding-bottom: 15px;
	}

	.label {
		width: 110px;
		color: #666;
	}

	.value {
		flex: 1;
		color: #666;
	}

	.red {
		color: #ff0000;
	}

	.section-title {
		font-weight: bold;
		margin-bottom: 10px;
		display: block;
		padding: 10px 15px;
		background-color: #F5F5F5;
	}

	.information {
		display: flex;
		border-bottom: 1px #EBEEF5 solid;
		padding: 8px 10px;
	}

	.information:last-child {
		border-bottom: 0 #EBEEF5 solid;
	}

	.introduce {
		width: 326px;
		text-align: left;
		margin-left: 30px;
	}

	.introduce-name {}

	.introduce-model {
		padding-top: 20px;
	}

	.td-img {
		width: 100px;
		height: 100px;
		margin: auto;
	}

	.td-img image {
		width: 100%;
		height: 100%;
	}


	.orderTime {
		margin-left: 140px;
		font-weight: 400;
	}

	.remainingTime {
		float: right;
		/* margin-left: 100px; */
		font-weight: 400;
		color: #D92400;
	}

	.product-item {
		display: flex;
		align-items: center;
	}

	.product-img {
		width: 100px;
		height: 100px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.product-desc {
		flex: 1;
		padding-left: 15px;
		margin-right: 15px;
		margin-bottom: 15px;
		box-sizing: border-box;
	}

	.product-model,
	.product-quantity {
		color: #666;
		display: block;
		margin-bottom: 4px;
	}

	.product-quantity1 {
		margin-top: 10px;
		font-size: 12px;
		color: #999;
	}

	.product-view {
		display: flex;
	}
	.product-view /deep/ .icon-del-box {
		display: none;
	}

	.informationImg {
		width: 50px;
		height: 50px;
		display: inline-block;
		margin: 0 4px;
	}

	.product-money {
		color: #D92400;
	}

	.product-money /deep/ .product-money1 {
		font-size: 13px;
	}

	.product-price {
		font-weight: bold;
	}

	.amount-item {
		display: flex;
		margin-bottom: 4px;
		padding-left: 15px;
		box-sizing: border-box;
	}

	.amount-item:last-child {
		padding-bottom: 10px;
	}

	.amount-item uni-button[size='mini'] {
		margin-left: 0;
		margin-right: 0;
	}

	.amount-item /deep/ .uni-tooltip-popup {
		width: 26px;
		background-color: rgba(255, 255, 255, 0);
		color: #000;
		padding: 0;
	}

	.butText {
		color: #c6231d;
		cursor: pointer;
		margin: 0 10px;
		line-height: 30px;
	}

	.butText:hover {
		text-decoration: underline;
	}

	.uni-input {
		height: 30px;
		margin-right: 6px;
		box-sizing: border-box;
		border: 1px solid #ccc;
		padding: 2px 10px;
		border-radius: 4px;
	}

	.total {
		font-weight: bold;
		margin-top: 15px;
	}

	.operation-buttons {
		width: 230px;
		display: flex;
		padding: 15px 0;
		float: right;
	}

	.operation-buttons button {
		/* margin-left: 15px; */
		/* padding: 10px 20px; */
		border-radius: 4px;
		font-size: 12px;
		background-color: #ff0000;
		color: #fff;
	}

	.operation-buttons uni-button {
		margin-left: 0;
		margin-right: 30px;
	}

	.pay-btn {}

	.cancel-btn {
		/* background-color: #f0f0f0; */
	}
</style>